<template>
    <div id="dialog" class="flex-center" v-if="control" style="-webkit-app-region: no-drag;">
        <div class="dialog-container">
            <div class="message align-center">
                <div v-if="options.type!='' && options.type==='success'"><img src="./img/success.png" alt=""></div>
                <div v-if="options.type!='' && options.type==='warn'"><img src="./img/warn.png" alt=""></div>
                <div v-if="options.type!='' && options.type==='error'"><img src="./img/error.png" alt=""></div>
                <div class="content s-15 text-center" v-if="options.message">
                    <p v-for="(item, index) in foramterMessage(options.message)" :key="item + index">
                        {{item}}
                    </p>
                </div>
            </div>
            <div class="btn flex-center">
                <button v-if="options.confirm" @click="confirm" class="dis-button s-15">{{options.confirm}} </button>
                <button v-if="options.cancel" @click="cancel" class="dis-button s-15">{{options.cancel}}</button>
            </div>
            <img class="close" src="./img/close.png" alt="" @click="control=false" v-if="options.close && !options.update">
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            options: {},
            control: true
        }
    },
    methods: {
        foramterMessage (message) {
            if (Array.isArray(message)) {
                return message
            } else {
                let messageArry = message.split(/[0-9]+\、{1}/)
                messageArry = messageArry.map((item, index) => {
                    return item = (index ? (index + '、') : '') + item
                })
                return messageArry
            }
        }
        // confirm () {
        //     return true
        // },
        // cancel () {
        //     return false
        // }
    }
}
</script>

<style lang="scss">
#dialog {
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    .dialog-container {
        background-color: #fff;
        width: 440px;
        border-radius: 8px;
        // overflow: hidden;
        position: relative;
        .title {
            width: 100%;
            height: 48px;
            border-radius: 8px;
            background-color: #f4f4f4;
            padding-left: 18px;
        }
        .message {
            margin: 0 50px;
            margin-top: 40px;
            img {
                width: 54px;
                height: 54px;
                margin-bottom: 24px;
            }
            .content {
                p {
                    text-align: left;
                    margin-bottom: 5px;
                }
            }
        }
        .btn {
            margin-bottom: 16px;
            button {
                width: 80px;
                height: 36px;
                margin-top: 34px;
                margin-bottom: 16px;
            }
            button:nth-child(1) {
                color: #fff;
                background-color: #4894ff;
                margin-right: 14px;
            }
            button:nth-child(2) {
                color: #606266;
                background-color: #fff;
                border: 1px solid rgba(222, 222, 231, 1);
            }
        }
        .close {
            width: 14px;
            height: 14px;
            position: absolute;
            right: 14px;
            top: 14px;
        }
    }
}
</style>
